<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
       v-model="loading"
       :finished="finished"
       finished-text="没有更多了"
       @load="onLoad"
       :immediate-check="false"
       offset="50"
      >
        <ArticleItem
        v-for='list in lists'
        :key="list.art_id"
        :artObj ='list'
        @disLikeEV='disLikeFn'
        @feedBackEV='feedBackFn'
        @click.native="itemClickFn(list.art_id)"
        >
        </ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getAllArticleListAPI, dislikeArticleAPI, feedBackArticleAPI } from '@/api'
import ArticleItem from '../../../components/ArticleItem.vue'
import Notify from '@/ui/Notify'
// 问题1: 网页刚打开, created里请求和onLoad里请求同时发送, 请求的都是最新数据
// onLoad中, 2次一样的数据合并, 数据重复, key重复了
// 原因: van-list组件, 组件挂载时, 默认就会判定一次是否触底
// 第一页数据也是网络请求回来的, 标签先挂载了, 数据回来更新DOM, 所以标签没有高度, list的load事件上来就触发
// 解决方案1: list组件添加 :immediate-check="false" 上来初始化时不要判定
// 解决方案2: onLoad第一行, 写数组长度的判断
export default {
  props: {
    channelId: Number // 文章列表数组
  },
  components: {
    ArticleItem
  },
  data () {
    return {
      lists: [],
      loading: false, // 底部加载状态
      finished: false, // 底部完成状态
      theTime: new Date().getTime(), // 用于分页
      isLoading: false
    }
  },
  created () {
    this.getAllArticleListFn()
  },
  methods: {
    // 专门发送网络请求
    async getAllArticleListFn () {
      const result2 = await getAllArticleListAPI({
        channel_id: this.channelId, // 先默认请求推荐频道数据
        timestamp: this.theTime
      })
      // console.log(result2)
      // this.lists = result2.data.data.results //这是一个坑 底部会一直加载
      // created()上来第一次list是空数组, 合并空数组没问题
      // onLoad()触底加载更多, 2个数组合并更没问题
      this.lists = [...this.lists, ...result2.data.data.results] // 正解
      // pre_timestamp
      // 下一段开头的那篇文章时间戳
      // 第一次 系统时间(timestamp) ->   后台 返回0-9条数据 ->携带第10条pre_timestamp值返回
      // 第二次 (timestamp)-上一次pre_timestamp (代表告诉后, 从指定的时间戳再往后找10个) 10-19条, 20条pre_timestamp返回
      // .......
      this.theTime = result2.data.data.pre_timestamp
      this.loading = false // 如果不关闭 底部一直处于加载状态
      if (result2.data.data.pre_timestamp === null) {
        this.finished = true // 本次是滑到最后了
      }
      this.isLoading = false
    },
    // 底部加载事件
    onLoad () {
      if (this.lists.length === 0) {
        this.loading = false // 第一次上面还是判定触底(触发onLoad方法时loading自动改true)
        // 如果不改回来, 下次触底就不在执行onLoad方法
        return // 如果页面没有数据, 没有高度, 让本次onLoad逻辑代码不往下执行
      }
      this.getAllArticleListFn()
    },
    onRefresh () {
      // 上拉刷新
      this.lists = []
      this.theTime = new Date().getTime()
      this.getAllArticleListFn()
    },
    // 反馈不感兴趣
    async disLikeFn (id) {
      await dislikeArticleAPI({
        artId: id
      })
      Notify({
        type: 'success',
        message: '反馈成功'
      })
    },
    // 反馈-垃圾内容
    async feedBackFn (id, value) {
      await feedBackArticleAPI({
        artId: id,
        type: value
      })
      Notify({
        type: 'success',
        message: '反馈成功'
      })
    },
    // 点击文章跳转到详情页
    itemClickFn (id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })

      console.log(id)
    }

  }
}
</script>

<style>

</style>
